<template>
  <div class="mouse-grid" @mousemove="mouseover">
    <div
      v-for="(item, index) in boxs"
      :key="'boxs' + index"
      :style="{ '--color': item, '--x': x + 'px', '--y': y + 'px' }"
      class="mouse-grid-item"
    >
      {{ 'text' + index }}
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const boxs = ref([])
const x = ref(0)
const y = ref(0)
const colors = ['#F9F871', '#FF9671', '#D13A28', '#D13A28', '#2C73D2', '#B39CD0']
boxs.value = new Array(16)
  .fill(null)
  .map(() => colors[Math.floor(Math.random() * colors.length)])
const mouseover = ({ offsetX, offsetY }) => {
  x.value = offsetX
  y.value = offsetY
}
/* const mouseout = (e) => {
    console.log(e);
    y.value = e.target.offsetHeight - e.offsetY
    x.value = e.target.offsetWidth - e.offsetX
} */
</script>
<style lang="scss" scoped>
$radiu-size: 600px;
.mouse-grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 20px;
  gap: 20px;
  background-color: #4b4453;
  &-item {
    position: relative;
    width: calc(25% - 15px);
    height: calc(25% - 15px);
    padding: 5px;
    overflow: hidden;
    background-color: rgb(99, 90, 108);
    z-index: 0;
    &::before {
      content: '';
      width: $radiu-size;
      height: $radiu-size;
      display: block;
      position: absolute;
      opacity: 0;
      top: var(--y);
      left: var(--x);
      transform: translate(-50%, -50%);
      pointer-events: none;
      background-image: radial-gradient(var(--color), transparent, transparent);
      z-index: -1;
      transition: 0.6s, top 0s 0.5s, left 0s 0.5s;
    }
    &::after {
      content: '';
      position: absolute;
      inset: 4px;
      background-color: rgba(99, 90, 108, 0.9);
      z-index: -1;
      pointer-events: none;
    }
    &:hover {
      &::before {
        opacity: 1;
        transition: 0.6s, top 0s, left 0s;
      }
    }
  }
}
</style>
